<template>
	<view class="container">
		<view class="search-box">
			<view class="search-icon">🔍</view>
			<input class="search-input" placeholder="搜索仓库名称..." v-model="searchQuery" @input="onSearch" />
			<view class="repo-count">{{ filteredRepos.length }} 个仓库</view>
		</view>

		<scroll-view class="repo-list" scroll-y>
			<view class="repo-item" v-for="(item, index) in filteredRepos" :key="index">
				<view class="repo-header">
					<view class="repo-info">
						<text class="repo-name">
							{{ item.name }} 
							<!-- 私有仓库标记 -->
							<text class="private-tag" v-if="item.private">私有</text>
						</text>
						<view class="repo-meta">
							<text class="create-time">创建时间: {{ item.createdTime }}</text>
						</view>
					</view>
					<view class="repo-downloads">
						<view class="download-icon">⬇️</view>
						<text class="download-count">{{ item.downloads }} 次下载</text>
					</view>
				</view>

				<!-- 公有仓库显示地址和复制按钮 -->
				<view class="repo-address-container" v-if="!item.private">
					<text class="repo-address" @tap="showFullUrl(item.html_url)">{{ item.html_url }}</text>
					<view class="copy-btn" @click="copyClick(item, index, $event)"> 
						<view class="copy-icon">📋</view>
						<text class="copy-text">复制</text>
					</view>
				</view>

				<!-- 私有仓库显示锁图标 -->
				<view class="private-repo-container" v-if="item.private" @click="showPrivateTip">
					<view class="lock-icon">🔒</view>
					<text class="private-text">私有仓库</text>
				</view>
			</view>

			<view class="empty-state" v-if="filteredRepos.length === 0">
				<view class="empty-icon">📭</view>
				<text class="empty-text">未找到匹配的仓库</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchQuery: '',
				repositories: []
			}
		},

		computed: {
			filteredRepos() {
				const query = this.searchQuery.toLowerCase().trim();
				if (!query) return this.repositories;

				return this.repositories.filter(repo =>
					repo.name.toLowerCase().includes(query)
				);
			}
		},

		onLoad() {
			this.getInit()
		},

		methods: {
			async getInit() {
				try {
					let parmse = {
						state: "look",
						databaseName: "git",
					}
					let result = await this.$axios('overallSituation', parmse)
					if (result.code == 200) {
						this.repositories = result.data || [];
						console.log('加载的仓库数据:', this.repositories);
					} else {
						console.error('接口返回非200状态:', result);
					}
				} catch (error) {
					console.error('加载数据出错:', error);
				}
			},

			formatDate(dateString) {
				if (!dateString) return '';
				const date = new Date(dateString);
				return date.toLocaleDateString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit'
				});
			},

			copyClick(item, index, event) {
				console.log('复制事件触发 - 索引:', index);
				console.log('当前点击的item:', item);
				
				const targetItem = item || this.repositories[index];
				
				if (!targetItem || !targetItem.html_url) {
					console.error('无法获取有效的仓库地址', targetItem);
					uni.showToast({
						title: '数据错误',
						icon: 'error',
						duration: 2000
					});
					return;
				}
				
				uni.setClipboardData({
					data: targetItem.html_url,
					success: () => {
						uni.showToast({
							title: '仓库地址已复制',
							icon: 'success',
							duration: 2000
						});
					},
					fail: (e) => {
						console.log('复制失败:', e);
						uni.showToast({
							title: '复制失败',
							icon: 'error',
							duration: 2000
						});
					}
				});
			},

			showFullUrl(url) {
				uni.showModal({
					title: '完整地址',
					content: url,
					showCancel: false,
					confirmText: '知道了'
				});
			},
			
			// 私有仓库点击提示
			showPrivateTip() {
				uni.showModal({
					title: '私有仓库',
					content: '该仓库为私有仓库，如需访问请联系作者获取权限',
					showCancel: false,
					confirmText: '确定'
				});
			},
			
			onSearch() {
				console.log('搜索结果:', this.filteredRepos);
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.search-box {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		border: 1rpx solid #e1e4e8;
	}

	.search-icon {
		margin-right: 20rpx;
		font-size: 32rpx;
		color: #3498db;
	}

	.search-input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 28rpx;
		color: #2c3e50;
		background: transparent;
	}

	.repo-count {
		color: #7f8c8d;
		font-size: 24rpx;
		margin-left: 20rpx;
		white-space: nowrap;
	}

	.repo-list {
		height: 87vh;
		background: white;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		border: 1rpx solid #e1e4e8;
	}

	.repo-item {
		padding: 30rpx;
		border-bottom: 1rpx solid #ecf0f1;
		transition: background-color 0.2s;
	}

	.repo-item:last-child {
		border-bottom: none;
	}

	.repo-item:hover {
		background-color: #f8fafc;
	}

	.repo-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.repo-info {
		flex: 1;
	}

	.repo-name {
		display: block;
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 10rpx;
	}

	/* 私有仓库标签样式 */
	.private-tag {
		display: inline-block;
		font-size: 20rpx;
		color: #ffffff;
		background-color: #e74c3c;
		padding: 2rpx 10rpx;
		border-radius: 10rpx;
		margin-left: 15rpx;
		vertical-align: middle;
	}

	.repo-meta {
		font-size: 24rpx;
		color: #7f8c8d;
	}

	.repo-downloads {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.download-icon {
		margin-right: 8rpx;
		font-size: 28rpx;
	}

	.download-count {
		font-size: 24rpx;
		color: #7f8c8d;
		white-space: nowrap;
	}

	.repo-address-container {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 20rpx;
		border: 1rpx solid #e9ecef;
	}

	.repo-address {
		flex: 1;
		color: #3498db;
		font-size: 26rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-right: 20rpx;
	}

	.copy-btn {
		background: #3498db;
		color: white;
		border-radius: 8rpx;
		padding: 12rpx 20rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		transition: background 0.3s;
		white-space: nowrap;
	}

	.copy-btn:active {
		background: #2980b9;
	}

	.copy-icon {
		margin-right: 8rpx;
		font-size: 26rpx;
	}

	/* 私有仓库容器样式 */
	.private-repo-container {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 20rpx;
		border: 1rpx solid #e9ecef;
		color: #7f8c8d;
		cursor: pointer;
	}

	.lock-icon {
		font-size: 28rpx;
		margin-right: 10rpx;
		color: #e74c3c;
	}

	.private-text {
		font-size: 26rpx;
	}

	.empty-state {
		text-align: center;
		padding: 100rpx 30rpx;
		color: #7f8c8d;
	}

	.empty-icon {
		font-size: 80rpx;
		margin-bottom: 30rpx;
		opacity: 0.5;
	}

	.empty-text {
		display: block;
		font-size: 28rpx;
		color: #7f8c8d;
	}

	@media (max-width: 750rpx) {
		.repo-header {
			flex-direction: column;
		}

		.repo-downloads {
			margin-left: 0;
			margin-top: 15rpx;
			align-self: flex-start;
		}

		.repo-address-container,
		.private-repo-container {
			flex-direction: column;
			align-items: stretch;
		}

		.repo-address {
			padding-right: 0;
			margin-bottom: 15rpx;
			text-align: center;
		}

		.copy-btn {
			justify-content: center;
		}
	}
</style>